import React, { Component } from 'react'
import { Carousel, WingBlank } from 'antd-mobile';
import { getBanner } from '../../request/api'
import { NavBar, Icon } from 'antd-mobile';
import { Modal, Button, WhiteSpace, Toast } from 'antd-mobile';
import { NoticeBar } from 'antd-mobile';
import '../../assets/css/topBar.css';
import '../../assets/css/lunbo.css'
// import  '../../assets/css/swiper.css'
const alert = Modal.alert;
export default class Mine extends Component {
    constructor() {
        super()
        this.state = {
            data: ['1', '2', '3'],
            imgHeight: 176,
            // banners: []
            user: sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : []
        }
    }
    exit() {
        localStorage.removeItem("user")
        localStorage.removeItem("copy")
        sessionStorage.removeItem("user")
        this.props.history.push("/login")
    }
    componentDidMount() {
        getBanner().then(res => {
            if (res.code === 200) {
                // console.log(res);
                // this.state.banners = res.list;
                this.timer = setTimeout(() => {
                    this.setState({
                        data: res.list
                    })
                }, 100);

            }
        })

    }
    componentWillUnmount() {
        clearInterval(this.timer)
    }
    render() {
        const { user } = this.state
        console.log(user);
        return (
            <>
                <NavBar
                    mode="dark"
                >我的</NavBar>

                {Object.values(user)[1] ?
                    <div className="mineShow">

                        {/* <!-- 大顶部 --> */}
                        <div className="top-big">
                            <div className="top1 clearfix">
                                <div className="fl-img fl clearfix">
                                    <div className="img-pic fl">
                                        <img src="/images/touxiang2.jpg" alt="" onClick={() =>
                                            alert('退出登录', '真的确定吗T_T', [
                                                { text: '取消', onPress: () => { } },
                                                { text: '确定', onPress: () => this.exit() },
                                            ])
                                        } />
                                    </div>
                                    <div className="new-name fl">
                                        <p className="sp-name">星夏一夜</p>
                                        <span className="span-zl">完善资料让小U更懂您</span>
                                    </div>
                                </div>
                                <div className="fr-pic fr">
                                    <div className="fr-pic-img">
                                        <img src="/images/red_envelopes.png" alt="" />
                                    </div>
                                    <span className="wz-red">每日签到</span>
                                </div>
                            </div>
                            <div className="top2">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <span>12</span>
                                            <span>我的收藏</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span>12</span>
                                            <span>浏览记录</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span>&yen;0</span>
                                            <span>我的红包</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span>12</span>
                                            <span>优惠券</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div className="top3">
                                <div className="first">
                                    <span className="myorder">我的订单</span>
                                    <a href="#" className="iconwz">
                                        <span>全部订单</span>
                                        <i className="iconfont icon-arrow-right1"></i>
                                    </a>
                                </div>
                                <div className="second">
                                    <ul>
                                        <li>
                                            <a href="#">
                                                <img
                                                    src="/images/icon/user/order/payment.png"
                                                    alt=""
                                                />
                                                <span>代付款</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <img
                                                    src="/images/icon/user/order/delivery.png"
                                                    alt=""
                                                />
                                                <span>待收货</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <img
                                                    src="/images/icon/user/order/evaluation.png"
                                                    alt=""
                                                />
                                                <span>评价</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <img
                                                    src="/images/icon/user/order/service.png"
                                                    alt=""
                                                />
                                                <span>售后/退款</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>


                        {/* <!-- 其他区域 --> */}
                        {/* beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                     afterChange={index => console.log('slide to', index)} */}
                        <WingBlank>
                            <Carousel
                                autoplay={true}
                                infinite
                            // beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                            // afterChange={index => console.log('slide to', index)}
                            >
                                {this.state.data.map(val => (

                                    <a
                                        key={val}
                                        href="http://www.alipay.com"
                                        style={{ display: 'inline-block', width: '100%', height: "400px" }}
                                    >
                                        <img
                                            src={this.$pregImg + val.img}
                                            alt=""
                                            style={{ width: '100%', verticalAlign: 'top' }}
                                            onLoad={() => {
                                                // fire window resize event to change height
                                                window.dispatchEvent(new Event('resize'));
                                                this.setState({ imgHeight: 'auto' });
                                            }}
                                        />
                                    </a>
                                ))}
                            </Carousel>
                        </WingBlank>


                        <div className="zoneMine">
                            <ul>
                                <li>
                                    <div className="zoneBox">
                                        <p><img src="/images/icon_address.png" alt="" /></p>
                                        <span>地址管理</span>
                                    </div>
                                </li>
                                <li>
                                    <div className="zoneBox">
                                        <p><img src="/images/icon_wallet.png" alt="" /></p>
                                        <span>我的钱包</span>
                                    </div>
                                </li>
                                <li>
                                    <div className="zoneBox">
                                        <p><img src="/images/icon_qr code.png" alt="" /></p>
                                        <span>我的二维码</span>
                                    </div>
                                </li>
                                <li>
                                    <div className="zoneBox">
                                        <p><img src="/images/icon_buddies.png" alt="" /></p>
                                        <span>我的小伙伴</span>
                                    </div>
                                </li>
                                <li>
                                    <div className="zoneBox">
                                        <p><img src="/images/icon_tryout.png" alt="" /></p>
                                        <span>0元试用</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    :

                    <div className="goLogin">
                        <WhiteSpace size="lg" />
                        <NoticeBar marqueeProps={{ loop: true, style: { padding: '0 7.5px' } }}>
                           您还未登录，请去登录
                        </NoticeBar>
                        <WhiteSpace size="lg" />
                        <Button loading  onClick={()=>this.props.history.push("/login")}>点击我登录,等待点击中</Button><WhiteSpace />
                    </div>
                }
                <br />    <br />    <br />
            </>
        )
    }
}
